<style>
  .message-template-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      @on-close="cancel"
      width="35%">
      <Form
        ref="messageTemplateDrawer"
        :model="row"
        :rules="rules"
        style="margin-top: 30px;"
        :label-width="100">
        <FormItem prop="title" label="标题：" style="width: 300px">
          <Input v-model="row.title" type="text" placeholder="请输入标题" />
        </FormItem>
        <FormItem prop="content" label="内容：" style="width: 400px; margin-top: 60px;">
          <Input v-model="row.content" type="textarea" :rows="8" placeholder="请输入标题" />
        </FormItem>
      </Form>
      <div class="message-template-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">返回</Button>
        <Button type="primary" @click="handleSubmit">创建</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'MessageTemplateDrawer',
  props: {
    modalState: Boolean,
    row: null
  },
  data () {
    return {
      title: '创建消息模板',
      loading: true,
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.messageTemplateDrawer.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('message-template-valid', {
          drawer: this.$refs['messageTemplateDrawer'],
          id: this.row.id,
          title: this.row.title,
          content: this.row.content
        })
      })
    },
    cancel () {
      this.$emit('on-cancel', this.$refs['messageTemplateDrawer'])
    }
  }
}
</script>
